<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../../include/taglib.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<%@include file="../../include/inhead.jsp"%>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<title>车辆保养--E爱车</title>
<%@include file="../../include/iswechat.jsp"%>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
			<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
<style>
body {
	color: #444;;
	background-color: #eee;
}

a {
	text-decoration: none
}

li {
	list-style: none;
}

.navbar-eaiche {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
}

.tile {
	border: 1px solid #ccc;
	background-color: #fff;
	height: 150px;
	line-height: 150px;
	margin-top: 20px;
	text-align: center;
	padding: 0px;
	border-radius: 5px;
}

.tile img {
	width: 40%;
}

.border-no {
	border: 0px;
}
/**************************服务选择样式********************************/
.group-box {
	border: 1px solid #ccc;
	border-radius: 5px 5px 0 0;
	background-color: #fff;
	margin: 10px;
}

.group-box .caption {
	height: 35px;
	line-height: 40px;
	padding-left: 10px;
	border-bottom: 1px solid #ccc;
}

.car-model-list {
	margin: 0px;
	padding: 0px;
	padding-left: 20px;
}

.car-model-list li {
	height: 40px;
	line-height: 40px;
}

.service-item {
	margin: 0px;
	padding: 0px;
	padding-left: 20px;
}

.service-item li {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #ccc;
	/*background-image: url(static/images/jiantou01.png);*/
	background-repeat: no-repeat;
	background-position: right;
}

.service-item .price {
	margin-left: 80px;
	color: red;
}

.other-selection {
	border-bottom: 1px solid #ccc;
	display: none;
	padding: 10px;
}

.show-me-the-money {
	height: 50px;
	line-height: 50px;
	color: red;
	font-weight: 16px;
	padding-left: 10px;
}
/**************************服务选择样式********************************/
/**************************订单信息********************************/
label {
	width: 70px;
	text-align: right;
	margin-right: 5px;
	line-height: 40px;
}

input {
	margin-top: 3px;
	height: 30px;
	border-radius: 3px;
	border: 1px solid #ccc;
}

textarea {
	margin-top: 3px;
	height: 30px;
	border-radius: 3px;
	border: 1px solid #ccc;
	height: 100px;
}

.pay-info {
	padding: 0px;
	padding-left: 20px;
	margin: 0;
}

.pay-info li {
	border-bottom: 1px solid #ccc;
}

.pay-info input,textarea {
	width: 50%;
}
/**************************订单信息********************************/
</style>
</head>
<body>
	<!-- 导航开始 -->
	<nav class="navbar navbar-eaiche">
		<div class="container">
			<div style="float: left;">
				<img style="height: 55px;" src="${ctx }/static/images/logoe.png" />
			</div>
			<div style="float: right; text-align: center; line-height: 50px;">
				<img style="height: 30px; margin-top: 0px;"
					src="${ctx }/static/images/local.png" />&nbsp;&nbsp;<span>${city }</span>
			</div>
		</div>
	</nav>
	<!-- 导航结束 -->
	<!-- 功能块开始 -->
	<form action="${ctx }/weixin/f/matenance/by/userpay" method="post">
	<div class="container-fluid">
		<div class="row">
			<div class="group-box">
				<div class="caption">
					<span>我的联系信息</span>
				</div>
				<div>
					<ul class="pay-info">
						<li><label>姓名:</label> <input type="text"  name="name" id="name" value=""  style="width:66%"/></li>
						<li><label>联系电话:</label> <input type="text" name="phone" id="phone" value="${customer.phoneNum }" style="width:66%"/></li>
						<li><label>服务门店:</label>${men }<input type="hidden" name="storeid" value="${storeid}"/>
						<li class="border-no"><label>联系地址:</label>${stor }<input type="text" id="cheng" name="chg" value="请填写详细地址.." style="margin-left:80px;margin-top:-20px;width:66%"/>
						</li>
					</ul>
				</div>
<input type="hidden" name="propathid" value="${propathid }"/>
			</div>
			<div class="group-box">
				<div class="caption">服务类型</div>
				<div>
					<ul class="car-model-list">
						<li>${lei }</li>
					</ul>
				</div>
			</div>
			<div class="group-box">
				<div class="caption">服务项目车型</div>
				<div>
					<ul class="service-item">
					   ${ht }
					</ul>
				</div>
			</div>
			<div class="group-box">
				<div class="caption">付费方式</div>
				<div>
					<ul class="service-item">
						<li><label>微信支付</label> <select id="zhitype" name="zhitype">
								<option value="1">微信支付</option>
								<option value="2">余额支付</option>
								<option value="3">现金支付</option>
						</select></li>
							<li><label>优惠券</label> 
								<c:if test="${coupon==null }">
								<span>暂无</span>
							</c:if>
							<c:if test="${coupon != null }">
								<select id="cop" name="cop">
								<option value="0,0,0">请选择</option>
									<c:forEach items="${coupon }" var="l" varStatus="ids">
										<option value="${l.couponPrice },${l.couponType },${l.collarid}">
											${l.couponName }</option>
									</c:forEach>
								
								</select>
							</c:if>
						</li>
						<li class="border-no"><label>支付金额:</label><span
							class="pay-money" id="paymoney"></span>元</li>
						
						<li class="border-no"><label>您的余额:</label>
						<input type="hidden" id="yue" value="${customer.surplus }"/>
						<span	class="pay-money" id="userpaymoney">${customer.surplus }</span>元</li>
						
					</ul>
				</div>
			</div>
		</div>
		<div style="height: 50px;"></div>
		<nav class="navbar navbar-default navbar-fixed-bottom">
			<div class="container">
				<div class="row">
					<div class="col-xs-9 show-me-the-money"></div>
					<div class="col-xs-3" style="line-height: 50px;">
						<button class="btn btn-default btn-warning" id="ti" onclick="return ta();">下一步</button>
					</div>
				</div>
			</div>
		</nav>
	</div>
	</form>
	<!-- 功能块结束 -->
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script
		src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
   <script type="text/javascript">
     var hiden = $('.service-item > li > input[type="hidden"]');
     var money = 0;
     var types = $('#cop').val();//优惠券
     var yue = $('#yue').val();//用户余额
     var type = 0;
     var yfprice=0;
     var index = types.indexOf(',');
     var copom = types.substring(0,index);
	
 	
    $(function(){

		    zhi();
	    	 $('#paymoney').html(money);
	    	 
	    	 $('#cop').on('change',function(){
	    		 money = 0;
	    		 copom=$('#cop').val();
	    		 zhi();
	    		 type=$('#zhitype').val();
	    		 if(type=="2"){
	    			 if(parseFloat(money)<0){
	    				 money=0;
	    			 }
	    			 zhiprice=parseFloat(yue)-parseFloat(money);
	    		 }else{
	    			zhiprice=yue;
	    		 }
	    		 $('#userpaymoney').html(zhiprice);
	    		 if(money<0){
	    			 $('#paymoney').html(0);
	    		 }else{
	    		 $('#paymoney').html(money);
	    		 }
	    		 
	    	 });
	    	 
	    	 $('#zhitype').on('change',function(){
	    		 type=$('#zhitype').val();
	    		 if(type=="2"){
	    			 if(yue>money){
	    			 zhiprice=yue-money;
	    			 $('#paymoney').html('0');
	    			 }else if(yue==money){
	    				 zhiprice=0;
	    				 $('#paymoney').html('0');
	    			 }else{
	    				 zhiprice = yue-money;
	    				 if(zhiprice<0){
	    					 alert("您的余额不足!请选择其他支付方式");
	    					 zhiprice=0;
	    				 }
	    			 }
	    			
	    		 }else{
	    			zhiprice=yue;
	    			 $('#paymoney').html(money);
	    		 }
	    
	    		 $('#userpaymoney').html(zhiprice);
	    		 
	    		 
	    		 
	    		
	    		 
	    		
	    		 
	    	 });
	    	 
	    	

    });
    
    function ta(){
   	 var username=$("#name").val();
	 var address=$("#cheng").val();
	 if(username==null|| username==""){
		 alert("请填写姓名!");
		
		 return false;
	 }else if(address==null || address=="请填写详细地址.."){
		 alert("请填写详细地址!");
		 return false;
	 }else if(yue!=undefined){
		 zhiprice = yue-money;
		 if(zhiprice<0){
			 alert("您的余额不足!请选择其他支付方式");
			 zhiprice=0;
			 return false;
		 }
		 
	 }
	 return true;
    }
    
    
    function zhi(){
    	  for(var i=0;i<hiden.length-1;i++){
	    		 money = parseFloat(money)+parseFloat($(hiden[i]).val());
	    	 }
	    	 if(copom!=undefined){//是否使用优惠券
	    		 money=parseFloat(money)-parseFloat(copom);
	    	 }
    }
    
   
    
   </script>
</body>
</html>

